<div [@routerTransition]>
  <nz-spin [nzTip]="l('Registering')" [nzSpinning]="saving">
    <nz-card [nzTitle]="nzTitle" nzHoverable='true'>
      <ng-template #nzTitle>
        <div class="text-center yoyo__block">
          <i class="anticon anticon-login"></i>
          <span>{{l('Register')}}</span>
        </div>
      </ng-template>

      <form nz-form #validateForm="ngForm" (ngSubmit)="save()" autocomplete="off">

        <br>

        <!-- 名 -->
        <!-- <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="name" #name='ngModel' [(ngModel)]="model.name" [placeholder]="l('Name')" required>
            </nz-input-group>
            <nz-form-explain *ngIf="name.control.dirty&&name.control.errors">
              <ng-container *ngIf="name.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->

        <!-- 姓 -->
        <!-- <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="surname" #surname="ngModel" [(ngModel)]="model.surname" [placeholder]="l('Surname')"
                required>
            </nz-input-group>
            <nz-form-explain *ngIf="surname.control.dirty&&surname.control.errors">
              <ng-container *ngIf="surname.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->


        <!-- 邮箱 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-mail">
              <input nz-input type="email" name="emailAddress" #emailAddress="ngModel" [(ngModel)]="model.emailAddress"
                [placeholder]="l('EmailAddress')" required email>
            </nz-input-group>
            <nz-form-explain *ngIf="emailAddress.control.dirty&&emailAddress.control.errors">
              <ng-container *ngIf="emailAddress.control.hasError('email')">{{l('NotEmail')}}</ng-container>
              <ng-container *ngIf="emailAddress.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>


        <!-- 用户账号 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="userName" #userName="ngModel" [(ngModel)]="model.userName" [placeholder]="l('UserName')"
                required maxlength="32">
            </nz-input-group>
            <nz-form-explain *ngIf="userName.control.dirty&&userName.control.errors">
              <ng-container *ngIf="userName.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 密码 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-lock">
              <input nz-input type="password" name="password" #password="ngModel" [(ngModel)]="model.password" type="password"
                [placeholder]="l('Password')" required maxlength="32" minlength="6">
            </nz-input-group>
            <nz-form-explain *ngIf="password.control.dirty&&password.control.errors">
              <ng-container *ngIf="password.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
              <ng-container *ngIf="password.control.hasError('minlength')">{{l('MinLength')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 验证码 -->
        <nz-form-item *ngIf="useCaptcha">
          <nz-form-control>
            <yoyo-captcha #captcha name="verificationCode" #verificationCodeInput="ngModel" [(ngModel)]="model.verificationCode"
              [placeholder]="l('CAPTCHA')" [type]="captchaType" [key]="model.userName" (keyup)="onKey($event)" required
              [minlength]="captchaLength" [maxlength]="captchaLength">
            </yoyo-captcha>

            <nz-form-explain *ngIf="verificationCodeInput.control.dirty&&verificationCodeInput.control.errors">
                <ng-container *ngIf="verificationCodeInput.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
              <ng-container *ngIf="verificationCodeInput.control.hasError('minlength')||verificationCodeInput.control.hasError('maxlength')">
                {{l('LengthError')}}
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 功能按钮 -->
        <button nz-button [nzType]="'primary'" [nzLoading]="saving" class="yoyo__block" type="submit" [disabled]="!validateForm.valid||saving">
          <i class="anticon anticon-login"></i>
          <span>{{l("Register")}}</span>
        </button>
      </form>

      <nz-form-item>
        <nz-col [nzSpan]="12">
        </nz-col>
        <nz-col [nzSpan]="12" class="text-right">
          <a (click)="back()">{{l("Back")}}</a>
        </nz-col>
      </nz-form-item>

      <p class="register-protocal" style="margin-top: 24px;">点击“注册”，即代表你同意<a href="/" target="_blank">《服务协议》</a></p>

    </nz-card>
  </nz-spin>
</div>
